<template>
  <div>
    <div class="shaixuan-box">
      <div class="shaixuan">
        <el-input
          style="width: 242px"
          size="medium"
          placeholder="请输入项目名称或项目编号"
          suffix-icon="el-icon-search"
          v-model="pictureListParams.name"
        ></el-input>
        <el-button @click="getPictureList" size="medium" type="primary" plain
          >搜索</el-button
        >
        <el-button
          style="margin-left: 0"
          @click="isHideFilter = !isHideFilter"
          size="medium"
          type="info"
          plain
          >筛选</el-button
        >
      </div>
      <div v-show="!isHideFilter" class="search-condition">
        <!-- <div class="search-title">
        <span class="name">当前片块</span>：铜梁区古龙镇莲花村7组12号
      </div> -->
        <div class="search-content">
          <!-- <div class>
          <span class="search-name">省份：</span>
          <el-select
            v-model="value"
            size="mini"
            style="width:120px;height:28px;"
            placeholder="请选择"
          >
            <el-option
              v-for="item in selectOp"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span style="margin-left: 10px;" class="search-name">城市：</span>
          <el-select
            v-model="value"
            size="mini"
            style="width:120px;height:28px;"
            placeholder="请选择"
          >
            <el-option
              v-for="item in selectOp"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div> -->
          <div class>
            <span class="search-name">区县：</span>
            <el-select
              v-model="pictureListParams.district"
              size="mini"
              style="width: 142px;"
              placeholder="请选择"
              @change="handleQuSelect"
              @clear="handleQuClear"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index) in quArr"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <span style="margin-left: 10px;" class="search-name">乡镇：</span>
            <el-select
              v-model="pictureListParams.countryside"
              size="mini"
              style="width: 142px;"
              placeholder="请选择"
              @change="handleXiangSelect"
              @clear="handleXiangClear"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index) in xiangArr"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <!-- <div class>
          <span class="search-name"> 村：</span>
          <el-select
            v-model="pictureListParams.village"
            size="mini"
            style="width: 300px;"
            placeholder="请选择"
            clearable
            filterable
          >
            <el-option
              v-for="(item, index) in cunArr"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div> -->
          <!-- <div class>
          <span class="search-name">项目名称：</span>
          <span class="project-name"
            >涪陵区古龙镇莲花村农村建设用地复垦项目</span
          >
        </div> -->
          <div class>
            <span class="search-name">项目时间：</span>
            <el-date-picker
              style="width:148px;"
              v-model="pictureListParams.startDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="开始日期"
              size="mini"
            ></el-date-picker>
            <span style="font-size:12px">&nbsp;-&nbsp;</span>
            <el-date-picker
              style="width:148px;"
              v-model="pictureListParams.endDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="结束日期"
              size="mini"
            ></el-date-picker>
          </div>
          <div class>
            <span class="search-name">系统类型：</span>
            <el-select
              v-model="pictureListParams.projectType"
              size="mini"
              style="width:180px;"
              placeholder="请选择"
              clearable
            >
              <el-option
                label="农村建设用地复垦"
                value="N_C_J_S_Y_D_F_K"
              ></el-option>
              <el-option label="国土综合整治" value="G_T_Z_H_Z_Z"></el-option>
            </el-select>
          </div>
          <div class>
            <span class="search-name">项目阶段：</span>
            <el-select
              v-model="pictureListParams.stage"
              size="mini"
              style="width: 180px;"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) in stageArr"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div class="search-result" v-loading="pictureListLoader">
      <div class="search-title">
        <span class="name">
          共搜索到
          <span style="color:#409EFF">{{ pictureList.length }}</span> 条结果
        </span>
      </div>
      <div class="result-area">
        <div
          class="list-item"
          v-for="(item, index) in pictureList"
          :key="index"
          @click="showDetail(item)"
        >
          <div class="list-row">
            <div class="item-title">{{ item.name }}</div>
            <div class="item-time">项目时间：{{ item.time }}</div>
            <div class="item-time" style="magirn-top:5px">
              项目类型：{{ item.projectType }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPictureList, getRegionListByParentId } from "@/api/bigMap";

export default {
  data() {
    return {
      stageArr: [
        // 当前所在阶段; 1:前期测绘阶段; 2:入库备案阶段; 3:竣工测绘阶段
        {
          value: 1,
          label: "前期测绘阶段"
        },
        {
          value: 2,
          label: "入库备案阶段"
        },
        {
          value: 3,
          label: "竣工测绘阶段"
        }
      ],
      value: 1,
      value2: "",
      value3: "",
      pictureListParams: {
        number: "",
        name: "",
        stage: "",
        district: "",
        countryside: "",
        village: "",
        // type: "",
        startDate: "",
        endDate: "",
        projectType: ""
      },
      pictureList: [],
      pictureListLoader: false,
      quArr: [], // 区数据
      xiangArr: [], // 乡数据
      cunArr: [], // 村数据
      isHideFilter: true
    };
  },
  component: {},
  created() {
    this.getPictureList();
    this.getQuArr();
  },
  methods: {
    showDetail(item) {
      this.$emit("showDetail", item);
    },
    getPictureList() {
      this.pictureListLoader = true;
      getPictureList(this.pictureListParams)
        .then(res => {
          this.pictureListLoader = false;
          this.pictureList = res.data;
        })
        .catch(err => {
          this.pictureListLoader = false;
        });
    },
    getQuArr() {
      getRegionListByParentId({
        parentId: 1
      })
        .then(res => {
          this.quArr = res.data;
        })
        .catch(err => {});
    },
    handleQuSelect(id) {
      getRegionListByParentId({
        parentId: id
      })
        .then(res => {
          this.xiangArr = res.data;
        })
        .catch(err => {});
    },
    handleXiangSelect(id) {
      getRegionListByParentId({
        parentId: id
      })
        .then(res => {
          this.cunArr = res.data;
        })
        .catch(err => {});
    },
    handleQuClear() {
      this.xiangArr = [];
      this.cunArr = [];
      this.pictureListParams.district = "";
      this.pictureListParams.countryside = "";
      this.pictureListParams.village = "";
    },
    handleXiangClear() {
      this.cunArr = [];
      this.pictureListParams.countryside = "";
      this.pictureListParams.village = "";
    },
    viewProjectInfo(obj){
      this.$parent.currentStatus = true;
      this.pictureListParams.name = obj.projectName;
      this.getPictureList();
    }
  }
};
</script>

<style lang="scss" scoped>
.search-condition {
  background-color: #fff;
  width: 100%;
  border-radius: 0 0 4px 4px;
  box-sizing: border-box;
  // padding: 0px 16px;
  .search-title {
    text-align: left;
    width: 100%;
    border-bottom: 1px dashed rgba(213, 213, 213, 1);
    color: #b3b3b3;
    font-size: 14px;
    .name {
      color: #666666;
    }
  }
  .search-content {
    text-align: left;
    padding: 5px 0;

    .search-name {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
    .project-name {
      display: inline-block;
      width: 263px;
      padding-left: 10px;
      height: 28px;
      background: rgba(248, 248, 248, 1);
      opacity: 1;
      border-radius: 2px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 28px;
      color: rgba(102, 102, 102, 1);
      border-radius: 3px;
    }
  }
}
.search-result {
  margin-top: 10px;
  background-color: #fff;
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;

  .search-title {
    text-align: left;
    border-bottom: 1px dashed rgba(213, 213, 213, 1);
    color: #b3b3b3;
    font-size: 14px;
    margin-left: 20px;
    .name {
      color: #666666;
    }
  }
}

.result-area {
  text-align: left;
  height: 280px;
  overflow-y: auto;
  .list-item {
    width: 100%;
    // height: 88px;
    padding-top: 6px;
    box-sizing: border-box;
    cursor: pointer;
    padding: 16px 20px;
    &:hover {
      background: rgba(240, 243, 245, 1);
    }
    .item-title {
      padding: 0;
      margin: 0;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 20px;
      color: rgba(64, 158, 255, 1);
    }
    .item-time {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 16px;
      color: rgba(102, 102, 102, 1);
      margin-top: 9px;
    }
  }
}

.shaixuan-box {
  background-color: #fff;
  padding: 10px 14px 20px 14px;
}
</style>
